<template>
	<div>
		<el-row>
            <el-col :span="23" class="toolbar marginTop20px">
            <el-tabs v-model="activeName" @tab-click="handleClick">
            	<el-tab-pane label="请求方" name="first">
                    <el-row>
                        <!--工具条-->
                        <el-col :span="24" class="" id="serachId">
                            <el-form :inline="true" :model="requestFilters">
                                <el-form-item style="float:right">
                                    <el-button type="primary" size="small" v-on:click="getRequestList">查询</el-button>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-input v-model="requestFilters.url" size="small" placeholder="请求接口地址"></el-input>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-input v-model="requestFilters.serviceName" size="small" placeholder="请求方名称"></el-input>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-input v-model="requestFilters.typeName" size="small" placeholder="请求方标识"></el-input>
                                </el-form-item>
                                <!-- <el-form-item style="float:right">
                                    <el-date-picker type="date" size="small" placeholder="结束时间" v-model="requestFilters.endTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-date-picker type="date" size="small" placeholder="开始时间" v-model="requestFilters.startTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                                </el-form-item> -->
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="tac">
                    <el-col :span="24" class="titleLineSymbolTwo" >
                        <!--列表-->
                        <el-table :data="requestData" highlight-current-row v-loading="requestListLoading" style="width: 100%;">
                            <el-table-column type="index" label="序号" min-width="60">
                            </el-table-column>
                            <el-table-column prop="serviceName" label="请求方标识" min-width="200">
                            </el-table-column>
                            <el-table-column prop="typeName" label="请求方名称" min-width="120">
                            </el-table-column>
                            <el-table-column prop="serviceUrl" label="请求方接口地址" min-width="120">
                            </el-table-column>
                            <el-table-column prop="interfaceByte" label="使用流量（Byte）" min-width="120">
                            </el-table-column>
                        </el-table>
                        <!--工具条-->
                        <el-col :span="24" class="marginTop10px">
                            <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange_request"
                                            :current-page="pageNum_request" :page-size="pageSize_request" :total="total_request">
                            </el-pagination>
                        </el-col>
                    </el-col>
                    </el-row>
            	</el-tab-pane>
                <el-tab-pane label="服务方" name="second">
                    <el-row>
                        <!--工具条-->
                        <el-col :span="24" class="" id="serachId">
                            <el-form :inline="true" :model="serviceFilters">
                                <el-form-item style="float:right">
                                    <el-button type="primary" size="small" v-on:click="getServiceList">查询</el-button>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-input v-model="serviceFilters.url" size="small" placeholder="服务接口地址"></el-input>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-input v-model="serviceFilters.serviceName" size="small" placeholder="服务方名称"></el-input>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-input v-model="serviceFilters.typeName" size="small" placeholder="服务方标识"></el-input>
                                </el-form-item>
                                <!-- <el-form-item style="float:right">
                                    <el-date-picker type="date" size="small" placeholder="结束时间" v-model="serviceFilters.endTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                                </el-form-item>
                                <el-form-item style="float:right">
                                    <el-date-picker type="date" size="small" placeholder="开始时间" v-model="serviceFilters.startTime" value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
                                </el-form-item> -->
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row class="tac">
                    <el-col :span="24" class="titleLineSymbolTwo">
                        <!--列表-->
                        <el-table :data="serviceData" highlight-current-row v-loading="serviceListLoading" style="width: 100%;">
                            <el-table-column type="index" label="序号" min-width="60">
                            </el-table-column>
                            <el-table-column prop="serviceName" label="服务方标识" min-width="200">
                            </el-table-column>
                            <el-table-column prop="typeName" label="服务方名称" min-width="120">
                            </el-table-column>
                            <el-table-column prop="serviceUrl" label="服务方接口地址" min-width="120">
                            </el-table-column>
                            <el-table-column prop="interfaceByte" label="使用流量（Byte）" min-width="120">
                            </el-table-column>
                        </el-table>
                        <!--工具条-->
                        <el-col :span="24" class="marginTop10px">
                            <el-pagination layout="total, prev, pager, next, jumper" @current-change="handleCurrentPageChange_service"
                                            :current-page="pageNum_service" :page-size="pageSize_service" :total="total_service">
                            </el-pagination>
                        </el-col>
                    </el-col>
                    </el-row>
            	</el-tab-pane>
            </el-tabs>
            </el-col>
		</el-row>
	</div>
</template>

<script>

	import util from '../api/utils'
	import { getInterfaceFlowList } from '../api/api';

	export default {
		data() {
			return {
                activeName: 'first',
				requestFilters: {
                    startTime: '',
                    endTime: '',
                    type:1,
                    typeName:'',
                    serviceName:'',
                    url:''
				},
				requestData: [],
				total_request: 0,
				pageNum_request: 1,
				pageSize_request:10,
                requestListLoading: false,
                serviceFilters: {
                    startTime: '',
                    endTime: '',
                    type:2,
                    typeName:'',
                    serviceName:'',
                    url:''
				},
                serviceData: [],
                total_service:0,
				pageNum_service: 1,
                pageSize_service:10,
                serviceListLoading: false,
			}
		},
		methods: {
            handleClick(tab, event) {
				if(tab.name === 'first'){
                    this.getRequestList();
                }else if(tab.name === 'second'){
                    this.getServiceList();
				}
            },
			handleCurrentPageChange_request: function (pageNum) {// 翻页动作
                this.pageNum_request = pageNum;
                this.getRequestList();// 翻页后刷新页面数据
            },
            handleCurrentPageChange_service: function (pageNum) {// 翻页动作
                this.pageNum_service = pageNum;
                this.getServiceList();// 翻页后刷新页面数据
			},
			//获取请求方列表
			getRequestList() {
				let params = {
					pageNum: this.pageNum_request,
                    pageSize: this.pageSize_request,
                    startTime: this.requestFilters.startTime,
                    endTime: this.requestFilters.endTime,
                    type: this.requestFilters.type,
                    typeName: this.requestFilters.typeName,
                    serviceName: this.requestFilters.serviceName,
                    url: this.requestFilters.url
				};
				this.requestListLoading = true;
				getInterfaceFlowList(params).then(function(result){
					this.requestData = result.data.data.list;
					this.pageNum_request = result.data.data.pageNum;
					this.pageSize_request = result.data.data.pageSize;
					this.total_request = result.data.data.total;
					this.requestListLoading = false;
				}.bind(this)).catch(function (error) {
					this.requestListLoading = false;
					console.log(error);
				}.bind(this));
            },
            //获取请求方列表
			getServiceList() {
				let params = {
					pageNum: this.pageNum_service,
                    pageSize: this.pageSize_service,
                    startTime: this.serviceFilters.startTime,
                    endTime: this.serviceFilters.endTime,
                    type: this.serviceFilters.type,
                    typeName: this.serviceFilters.typeName,
                    serviceName: this.serviceFilters.serviceName,
                    url: this.serviceFilters.url
				};
				this.serviceListLoading = true;
				getInterfaceFlowList(params).then(function(result){
					this.serviceData = result.data.data.list;
					this.pageNum_service = result.data.data.pageNum;
					this.pageSize_service = result.data.data.pageSize;
					this.total_service = result.data.data.total;
					this.serviceListLoading = false;
				}.bind(this)).catch(function (error) {
					this.serviceListLoading = false;
					console.log(error);
				}.bind(this));
			},
		},
		watch: {
			res1 (val) {
				this.showRes = val;
				console.log(this.showRes);
			},
			resDefault (val) {
				this.showRes = val;
			}
    	},
		mounted() {
			this.getRequestList();
		}
	}

</script>